<template>
  <div class="hor-layout-center" style="padding-right: 20px;padding-bottom: 15px;">
    <span>时间轴：</span>
    <el-slider
        style="flex: 1;padding-right: 20px"
        v-model="currentTime"
        show-stops
        :step="1"
        :min="minTime"
        :max="maxTime"
        :marks="markMap"
        label="选择时间"
        @change="changeValue"
        :format-tooltip="formatTooltip">
    </el-slider>
  </div>
</template>

<script>
import {getDateTime} from "@/utils/util.js"

export default {
  name: "time-slider",
  props: {
    startTime: {type: String, default: ''},
    endTime: {type: String, default: ''},
    timeList: {type: Array}
  },
  data() {
    return {
      spanList: [],//在timeList基础上新增距离属性
      currentTime: 0,
      stepTimer: '',//时间滚动器
      stepLineCur: {//当前步段的信息
        index: 0,
        speed: 0,
      },
      stepList: []
    }
  },
  watch: {
    timeList: {
      immediate: true,
      handler(val) {
        this.initTimeSpans()
      }
    },
    value: {
      immediate: true,
      handler(val) {
        if (val) this.startTimer()
      }
    }
  },
  computed: {
    maxTime() {
      let maxObj = this.spanList.find(item => item.label == this.endTime)
      return maxObj ? maxObj.span : 0
    },
    minTime() {
      let minObj = this.spanList.find(item => item.label == this.startTime)
      return minObj ? minObj.span : 0
    },
    markMap() {
      let mark = {}
      let startIndex = this.timeList.findIndex(item => item.label == this.startTime)
      let endIndex = this.timeList.findIndex(item => item.label == this.endTime)
      let timeSpan = this.spanList.slice(startIndex, endIndex + 1);
      this.stepList = timeSpan
      timeSpan.filter((item, index) => {
        return item.showMark || index == 0 || index == timeSpan.length - 1
      }).forEach(item => {
        mark[item.span] = item.label.split(' ')[1]
      })
      return mark
    }
  },
  mounted() {

  },
  methods: {
    startTimer() {
      this.currentTime = this.stepList[0].span
      this.stepLineCur = {index: 0, speed: 0}
      this.clearTimer()
      this.resumeTimer()
    },
    pauseTimer() {
      this.clearTimer()
    },
    resumeTimer() {
      this.clearTimer()
      this.stepTimer = setInterval(() => {
        console.log("stepTimer")
        if (this.currentTime >= this.stepList[this.stepList.length - 1].span) this.clearTimer()
        this.currentTime = this.currentTime + this.getSpanSpeed()
      }, 100)//0.1s
    },
    stopTimer() {
      this.currentTime = 0
      this.clearTimer()
    },
    clearTimer() {
      if (this.stepTimer) {
        clearInterval(this.stepTimer)
        this.stepTimer = null
      }
    },
    getSpanSpeed() {
      // console.log("startTimer1", this.currentTime)
      let {index: curIndex, speed: curSpeed} = this.stepLineCur
      if (curSpeed && this.currentTime < this.stepList[curIndex + 1].span
          && this.currentTime > this.stepList[curIndex].span) {
        return curSpeed
      }
      // console.log("getSpanSpeed2======", this.stepLineCur.speed, this.currentTime)
      if (curSpeed) this.stepLineCur.index = this.stepLineCur.index + 1
      this.stepLineCur.speed = this.stepList[this.stepLineCur.index].speed
      return this.stepLineCur.speed
    },
    initTimeSpans() {
      this.spanList = this.timeList.map((item, index) => {
        item.showMark = true
        item.span = this.getTimeSpan(this.timeList[0].label, item.label)
        if (item.label && index < this.timeList.length - 1) {
          let timeSpan = this.getTimeSpan(item.label, this.timeList[index + 1].label)
          let itemDis = item.dis //两点距离：m
          let speed = 200 * 1000 / (1 * 60 * 60)//巡航器速度： m/s
          let costTime = itemDis / speed //巡航器用时：s
          let timeSpeed = timeSpan / costTime / 10
          item.timeSpan = timeSpan
          item.speed = timeSpeed
        }
        return item
      })
    },
    getTimeBySpan(start, span) {
      let dateStart = new Date(start.replace(/-/g, "/")).getTime()
      let dateValue = dateStart + span * 1000
      return getDateTime(new Date(dateValue))
    },
    getTimeSpan(start, end) {//这个时间差是：s
      let dateStart = new Date(start.replace(/-/g, "/"));
      let dateEnd = new Date(end.replace(/-/g, "/"));
      let dateDiff = dateEnd.getTime() - dateStart.getTime();//时间差的毫秒数
      let secondDiff = dateDiff / 1000
      return secondDiff
    },
    formatTooltip(val) {
      return this.getTimeBySpan(this.startTime, val)
    },
    changeValue(val) {
      let index = this.stepList.findIndex((item, index) => {
        if (index < this.stepList.length - 1) return val > item.span && val <= this.stepList[index + 1].span
        else return val >= item.span
      })
      let span = this.stepList[index].span
      let timeSpan = this.stepList[index].timeSpan
      // console.log("index==", index, span, val - span, timeSpan)
      this.$emit("changeValue", index, (val - span) / timeSpan);
    }
  }
}
</script>

<style scoped>
/deep/ .el-slider__marks-text {
  font-size: 12px;
  transform: rotateZ(34deg);
}
</style>
